define(["jquery", "bootstrap", "backend", "table", "form"], function (
  $,
  undefined,
  Backend,
  Table,
  Form
) {
  var Controller = {
    index: function () {
      // 初始化表格参数配置
      Table.api.init({
        extend: {
          index_url: "setmeal/index" + location.search,
          add_url: "setmeal/add",
          edit_url: "setmeal/edit",
          del_url: "setmeal/del",
          multi_url: "setmeal/multi",
          import_url: "setmeal/import",
          table: "setmeal",
        },
      });

      var table = $("#table");

      // 初始化表格
      table.bootstrapTable({
        url: $.fn.bootstrapTable.defaults.extend.index_url,
        pk: "id",
        sortName: "id",
        fixedColumns: true,
        fixedRightNumber: 1,
        commonSearch: true,
        search: false,
        searchFormVisible: true,
         showToggle: false,
        showColumns: false,
        showExport: false,
        columns: [
          [
            { checkbox: true },
            { field: "name", title: __("Name"), operate: "LIKE" },
            {
              field: "image",
              title: __("Image"),
              operate: false,
              events: Table.api.events.image,
              formatter: Table.api.formatter.image,
            },
            {
              field: "category.name",
              title: __("Category.name"),
              operate: "LIKE",
            },
            { field: "price", title: __("Price"), operate: false, },
            {
              field: "status",
              title: __("Status"),
              searchList: { 0: __("Status 0"), 1: __("Status 1") },
              formatter: Table.api.formatter.status,
            },
            {
              field: "update_time",
              title: __("Update_time"),
              operate: false,
              addclass: "datetimerange",
              autocomplete: false,
            },
            {
              field: "operate",
              title: __("Operate"),
              table: table,
              events: Table.api.events.operate,
              formatter: Table.api.formatter.operate,
            },
          ],
        ],
      });

      // 为表格绑定事件
      Table.api.bindevent(table);
    },
    add: function () {
      Controller.api.bindevent();
      var myModal = $("#myModal");
      var catNav = $("#catNav");
      var tabContent = $("#tabContent");
      var dishList = $("#dishList");
      var dishSelectList = [];
      var dishData = [];
      var dishTable = $("#dishTable");
      var dishCount = $("#dishCount");

      // 添加菜品：打开模态框
      $("#addDish").click(function (e) {
        e.preventDefault();
        $("#myModal").modal("show");
      });

      // 模态框显示：加载菜品分类数据
      myModal.on("show.bs.modal", function (e) {
        console.log("模态框显示");

        $.getJSON("ajax/dishCategory", {}, function (data, textStatus, jqXHR) {
          console.log(data);
          if (data.code == 1) {
            // 合并所有分类的菜品到 dishData
            data.data.forEach((element) => {
              dishData.push(...element.dishes);
            });
            // 生成分类导航和菜品表格
            var catNavHtml = ``;
            var tabContentHtml = ``;
            $.each(data.data, function (indexInArray, valueOfElement) {
              // 分类导航
              catNavHtml += `<li role="presentation" class="${
                indexInArray == 0 ? "active" : ""
              }">
                        <a href="#${
                          valueOfElement.categoryName
                        }" data-toggle="tab">${valueOfElement.categoryName}</a>
                    </li>`;
              // 分类菜品表格
              tabContentHtml += `<div role="tabpanel" class="tab-pane ${
                indexInArray == 0 ? "active" : ""
              }" id="${valueOfElement.categoryName}">`;
              tabContentHtml += `<table class="table table-bordered table-hover"><tbody>`;
              // 遍历分类下的菜品
              $.each(valueOfElement.dishes, function (indexInArray, dish) {
                tabContentHtml += `<tr>
                            <td><input class="dynamic-checkbox" type="checkbox" data-id="${
                              dish.id
                            }"></td>
                            <td>${dish.name}</td>
                            <td>${dish.status == 1 ? "在售" : "停售"}</td>
                            <td>￥${dish.price}</td>
                        </tr>`;
              });
              tabContentHtml += `</tbody></table></div>`;
            });
            // 渲染到页面
            catNav.html(catNavHtml);
            tabContent.html(tabContentHtml);
          }

          // 渲染到页面（此时复选框已存在）
          catNav.html(catNavHtml);
          tabContent.html(tabContentHtml);

          // 2. 再恢复已选菜品的勾选状态（关键：此时复选框已渲染）
          const existingDishIds = []; // 存储当前已添加的菜品ID（来自dishTable）
          dishTable.find("tbody tr").each(function () {
            existingDishIds.push(
              parseInt($(this).find('input[name$="[id]"]').val())
            );
          });

          // 遍历所有复选框，勾选已存在的菜品
          tabContent.find(".dynamic-checkbox").each(function () {
            const dishId = parseInt($(this).data("id"));
            if (existingDishIds.includes(dishId)) {
              $(this).prop("checked", true); // 恢复勾选状态
              // 同步到右侧已选列表（避免遗漏）
              if (!dishSelectList.some((dish) => dish.id === dishId)) {
                const dish = dishData.find((item) => item.id === dishId);
                if (dish) dishSelectList.push(dish);
              }
            }
          });

          // 渲染后更新右侧列表
          updateDish();
        });
      });

      // 切换Tab
      $("#myTabs a").click(function (e) {
        e.preventDefault();
        $(this).tab("show");
      });

      // 监听分类菜品勾选：更新已选列表
      tabContent.on("change", ".dynamic-checkbox", function () {
        const isChecked = this.checked;
        const dishId = parseInt(this.dataset.id);
        const currentDish = dishData.find((item) => item.id === dishId);

        if (!currentDish) return;

        // 更新 dishSelectList
        if (isChecked) {
          !dishSelectList.some((dish) => dish.id === dishId) &&
            dishSelectList.push(currentDish);
        } else {
          dishSelectList = dishSelectList.filter((dish) => dish.id !== dishId);
        }
        updateDish(); // 同步更新右侧列表
        console.log("更新后的 dishSelectList", dishSelectList);
      });

      // 删除已选菜品（右侧列表）
      dishList.on("click", ".delete-dish", function (e) {
        e.preventDefault();
        const dishId = parseInt($(this).data("id"));
        // 从 dishSelectList 中移除
        dishSelectList = dishSelectList.filter((dish) => dish.id !== dishId);
        // 取消左侧复选框勾选
        const targetCheckbox = tabContent.find(
          `.dynamic-checkbox[data-id="${dishId}"]`
        );
        targetCheckbox.prop("checked", false);
        // 同步更新右侧列表
        updateDish();
      });

      // 修改：从 dishTable 获取已选菜品（实时同步）
      function updateDish() {
        const totalCount = dishTable.find("tbody tr").length;
        dishCount.text(totalCount); // 更新菜品总数
        dishList.empty(); // 清空列表

        // 遍历 dishTable 生成已选列表
        dishTable.find("tbody tr").each(function () {
          const dishId = parseInt($(this).find('input[name$="[id]"]').val());
          const dishName = $(this).find('input[name$="[name]"]').val();
          const dishPrice = $(this).find('input[name$="[price]"]').val();

          const listItem = $(`
                <li class="list-group-item" style="display: flex; justify-content: space-between; align-items: center;">
                    <div>
                        <h4 class="list-group-item-heading">${dishName}</h4>
                        <p class="list-group-item-text">￥${dishPrice}</p>
                    </div>
                    <span class="glyphicon glyphicon-remove delete-dish" data-id="${dishId}"></span>
                </li>
            `);
          dishList.append(listItem);
        });
      }

      // 监听 dishTable 变化：自动更新右侧列表
      dishTable.on("DOMSubtreeModified", "tbody", function () {
        updateDish();
      });

      // 确定保存菜品：**追加而非覆盖**原有内容
      $("#addBtn").click(function (e) {
        e.preventDefault();
        const html = [];
        // 收集当前选中的菜品（过滤已添加过的）
        const selectedDishes = [];
        tabContent.find(".dynamic-checkbox:checked").each(function () {
          const dishId = parseInt($(this).data("id"));
          // 排除已存在于 dishTable 的菜品
          if (
            !dishTable.find(`tr:has(input[name$="[id]"][value="${dishId}"])`)
              .length
          ) {
            const dish = dishData.find((item) => item.id === dishId);
            selectedDishes.push(dish);
          }
        });

        // 生成追加的 HTML
        selectedDishes.forEach((dish, index) => {
          const rowIndex = dishTable.find("tbody tr").length + index;
          html.push(`
                <tr>
                    <td>${dish.name}</td>
                    <td>￥${dish.price}</td>
                    <td class="col-xs-3">
                        <input type="hidden" name="row[dish_list][${rowIndex}][id]" value="${dish.id}">
                        <input type="hidden" name="row[dish_list][${rowIndex}][name]" value="${dish.name}">
                        <input type="hidden" name="row[dish_list][${rowIndex}][price]" value="${dish.price}">
                        <input type="number" name="row[dish_list][${rowIndex}][copies]" min="1" value="1" class="form-control" />
                    </td>
                    <td class="del">删除</td>
                </tr>
            `);
        });

        // 追加到 dishTable（而非覆盖）
        if (html.length) {
          dishTable.find("tbody").append(html.join(""));
        }
        myModal.modal("hide");
        Layer.msg(`成功添加 ${selectedDishes.length} 道菜品`); // 提示
      });

      // 删除菜品（dishTable 中的行）
      dishTable.on("click", ".del", function (e) {
        e.preventDefault();
        $(this).parent().remove();
      });

      // 模态框关闭：重置临时状态
      myModal.on("hidden.bs.modal", function (e) {
        refreshModelStatus();
      });

      function refreshModelStatus() {
        // dishData = []; // 注释掉这行 - 保留菜品数据
        dishCount.text("0");
        dishList.empty();
        // tabContent.find(".dynamic-checkbox").prop("checked", false); // 注释掉这行 - 不再重置复选框
      }
    },
    edit: function () {
      Controller.api.bindevent();
      var myModal = $("#myModal");
      var catNav = $("#catNav");
      var tabContent = $("#tabContent");
      var dishList = $("#dishList");
      var dishSelectList = [];
      var dishData = [];
      // 添加菜品
      $("#addDish").click(function (e) {
        e.preventDefault();
        $("#myModal").modal("show");
      });
      // 模态框显示
      // 模态框显示时：勾选已有菜品 + 初始化分类数据
      myModal.on("show.bs.modal", function (e) {
        console.log("模态框显示");

        // 1. 勾选dishTable中已有的菜品
        dishTable.find("tbody tr").each(function () {
          var dishId = parseInt($(this).find('input[name$="[id]"]').val());
          var targetCheckbox = tabContent.find(
            `.dynamic-checkbox[data-id="${dishId}"]`
          );
          targetCheckbox.prop("checked", true); // 勾选复选框
        });

        // 2. 加载菜品分类数据（原逻辑保留，新增“已勾选”标记）
        $.getJSON("ajax/dishCategory", {}, function (data) {
          if (data.code == 1) {
            dishData = dishData.concat(
              ...data.data.flatMap((item) => item.dishes)
            ); // 合并菜品数据
            var catNavHtml = "",
              tabContentHtml = "";

            data.data.forEach((category, catIndex) => {
              // 分类导航
              catNavHtml += `<li role="presentation" class="${
                catIndex === 0 ? "active" : ""
              }">
                    <a href="#${category.categoryName}" data-toggle="tab">${
                category.categoryName
              }</a>
                </li>`;

              // 分类菜品表格
              tabContentHtml += `<div role="tabpanel" class="tab-pane ${
                catIndex === 0 ? "active" : ""
              }" id="${category.categoryName}">`;
              tabContentHtml += `<table class="table table-bordered table-hover"><tbody>`;

              category.dishes.forEach((dish) => {
                // 检查是否已勾选（来自dishTable）
                var isChecked =
                  dishTable.find(
                    `tr:has(input[name$="[id]"][value="${dish.id}"])`
                  ).length > 0;
                tabContentHtml += `
                    <tr>
                        <td><input class="dynamic-checkbox" type="checkbox" data-id="${
                          dish.id
                        }" ${isChecked ? "checked" : ""}></td>
                        <td>${dish.name}</td>
                        <td>${dish.status == 1 ? "在售" : "停售"}</td>
                        <td>￥${dish.price}</td>
                    </tr>`;
              });

              tabContentHtml += `</tbody></table></div>`;
            });

            catNav.html(catNavHtml);
            tabContent.html(tabContentHtml);
          }
        });
      });
      // 切换tab
      $("#myTabs a").click(function (e) {
        e.preventDefault();
        $(this).tab("show");
      });
      // 菜品总数
      var dishCount = $("#dishCount");
      tabContent.on("change", ".dynamic-checkbox", function () {
        const isChecked = this.checked; // 获取当前复选框选中状态
        const dishId = parseInt(this.dataset.id); // 获取菜品ID（转换为数字类型）

        // 在dishData中查找当前复选框对应的菜品对象
        const currentDish = dishData.find((item) => item.id === dishId);

        if (!currentDish) return; // 如果没找到菜品数据则退出

        if (isChecked) {
          // 如果复选框被选中：检查是否已存在数组中，不存在则添加
          if (!dishSelectList.some((dish) => dish.id === dishId)) {
            dishSelectList.push(currentDish);
          }
        } else {
          // 如果复选框被取消选中：从数组中移除该菜品
          dishSelectList = dishSelectList.filter((dish) => dish.id !== dishId);
        }
        updateDish();
        console.log("更新后的dishSelectList", dishSelectList);
      });

      // 删除已选菜品（修复事件委托问题）
      dishList.on("click", ".delete-dish", function (e) {
        e.preventDefault();
        const dishId = parseInt($(this).data("id"));

        // 从已选列表中移除
        dishSelectList = dishSelectList.filter((dish) => dish.id !== dishId);

        // 更新左侧复选框状态
        const targetCheckbox = tabContent.find(
          `.dynamic-checkbox[data-id="${dishId}"]`
        );
        if (targetCheckbox.length) {
          targetCheckbox.prop("checked", false);
        }

        // 重新渲染列表
        updateDish();
      });

      var dishTable = $("#dishTable");

      // 监听dishTable变化，更新右侧已选列表
      dishTable.on("DOMSubtreeModified", "tbody", function () {
        updateDish(); // 调用更新函数
      });

      // 确定保存菜品（追加而非覆盖）
      $("#addBtn").click(function (e) {
        e.preventDefault();
        var html = "";
        // 收集当前模态框中选中的菜品（仅未添加过的）
        var selectedDishes = [];
        tabContent.find(".dynamic-checkbox:checked").each(function () {
          var dishId = parseInt($(this).data("id"));
          var dish = dishData.find((item) => item.id === dishId);
          // 过滤已存在于dishTable中的菜品
          if (
            !dishTable.find(`tr:has(input[name$="[id]"][value="${dishId}"])`)
              .length
          ) {
            selectedDishes.push(dish);
          }
        });

        // 生成新菜品行HTML（追加）
        $.each(selectedDishes, function (index, dish) {
          var rowIndex = dishTable.find("tbody tr").length + index;
          html += `
        <tr>
            <td>${dish.name}</td>
            <td>￥${dish.price}</td>
            <td class="col-xs-3">
                <input type="hidden" name="row[dish_list][${rowIndex}][id]" value="${dish.id}">
                <input type="hidden" name="row[dish_list][${rowIndex}][name]" value="${dish.name}">
                <input type="hidden" name="row[dish_list][${rowIndex}][price]" value="${dish.price}">
                <input type="number" name="row[dish_list][${rowIndex}][copies]" min="1" value="1" class="form-control" />
            </td>
            <td class="del">删除</td>
        </tr>`;
        });

        // 追加到dishTable
        if (html) dishTable.find("tbody").append(html);
        myModal.modal("hide"); // 关闭模态框
        Layer.msg(`成功添加${selectedDishes.length}道菜品`); // 提示
      });

      dishTable.on("click", ".del", function (e) {
        e.preventDefault(); // 防止默认行为（若有）
        $(this).parent().remove();
      });

      // 模态框关闭刷新
      myModal.on("hidden.bs.modal", function (e) {
        refreshModelStatus();
      });
      // 刷新模态框
      // 模态框关闭时：重置临时状态（保留dishSelectList）
      function refreshModelStatus() {
        dishData = []; // 清空菜品数据（下次打开重新加载）
        dishCount.text("0");
        dishList.empty();
        tabContent.find(".dynamic-checkbox").prop("checked", false); // 重置复选框
      }

      // 修改updateDish：从dishTable获取已选菜品
      function updateDish() {
        var totalCount = dishTable.find("tbody tr").length;
        dishCount.text(totalCount); // 更新总数
        dishList.empty(); // 清空列表

        // 遍历dishTable生成已选列表
        dishTable.find("tbody tr").each(function () {
          var dishId = parseInt($(this).find('input[name$="[id]"]').val());
          var dishName = $(this).find('input[name$="[name]"]').val();
          var dishPrice = $(this).find('input[name$="[price]"]').val();

          var listItem = $(`
        <li class="list-group-item" style="display:flex; justify-content:space-between; align-items:center;">
            <div>
                <h4 class="list-group-item-heading">${dishName}</h4>
                <p class="list-group-item-text">￥${dishPrice}</p>
            </div>
            <span class="glyphicon glyphicon-remove delete-dish" data-id="${dishId}"></span>
        </li>
        `);
          dishList.append(listItem);
        });
      }
    },
    api: {
      bindevent: function () {
        Form.api.bindevent($("form[role=form]"));
      },
    },
  };
  return Controller;
});
